import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom'
import  {actionCreators} from '../store'
import {
    ListItem,
    ListInfo,
    LoadMore,
}from '../style'
class List extends Component {
    render() {
        const {list, getMoreList} = this.props;
        return (
            <>
            {
                list.map((item, index) => {
                    return (
                        <Link key={index} to={'/detail/' + item.get('id')}>
                            <ListItem >
                                <img className="pic" src={item.get('imgUrl')}/>
                                <ListInfo>
                                    <h3 className="title">{item.get('title')}</h3>
                                    <p className="desc">{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>
                    )
                })
            }
            <LoadMore onClick={getMoreList}>加载更多...</LoadMore>
            </>
        )
    }
}

const mapStateToProps = (state) => ({
    list: state.get('home').get('articleList'),
}) 

const mapDispatchToProps =(dispatch) =>({
    getMoreList() {
        dispatch(actionCreators.getMoreList());
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(List);